<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="`接口列表`"></topTitle>
    <div class="mainCon">
      <el-row class="searchBox searchInputWidth">
        <el-form :inline="true" :model="filterField" ref="accountForm">
          <el-col :lg="8" :xl="6">
            <el-form-item label="接口名称" class="row-padding-bottom">
              <el-input
                v-model="filterField.cnName"
                placeholder="请输入接口名称"
              />
            </el-form-item>
          </el-col>
          <el-form-item>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchTable"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              class="commonBut saveBtn funComBut"
              icon="icon iconfont icontianjia"
              @click="toAdd()"
            >
              <span class="opetareText">添加</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <!-- 列表 -->
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column label="接口名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.cnName"
                :columnName="'cnName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="methodName"
            label="Method"
            :formatter="formatTd"
          />
          <el-table-column
            align="center"
            prop="code"
            label="接口编码"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="enable"
            label="状态"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <el-switch
                class="switch"
                v-model="scope.row.enabled"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="ENABLED"
                inactive-value="DISABLE"
                active-text="启用"
                inactive-text="停用"
                @change="changStatus($event, scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="操作"
            width="250px"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="toLog(scope.row)"
                >查看日志</el-link
              >
              <el-link type="primary" @click="toUpdate(scope.row)"
                >修改</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息" />
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageSize="getpageSize"
          @getpageNo="getpageNo"
        />
      </div>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="40%"
      :modal-append-to-body="false"
    >
      <el-form
        :model="dialogFormData"
        :rules="dialogFormRules"
        ref="dialogFormData"
        label-width="150px"
        class="demo-formData"
      >
        <el-row>
          <el-form-item
            prop="cnName"
            label="接口名称"
            class="row-padding-bottom"
          >
            <el-input
              v-model="dialogFormData.cnName"
              placeholder="请输入接口名称"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            prop="methodName"
            label="Method"
            class="row-padding-bottom"
          >
            <el-input
              v-model="dialogFormData.methodName"
              placeholder="请输入Method"
            />
          </el-form-item>
          <el-form-item prop="code" label="接口编码" class="row-padding-bottom">
            <el-input
              v-model="dialogFormData.code"
              placeholder="请输入接口编号"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="btnGroup">
        <el-button @click="cancel" class="cancel">取 消</el-button>
        <el-button
          type="primary"
          class="save"
          @click.native="saveForm"
          :loading="isSaveLoading"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'interfaceManageList',
  mixins: [scrollTable],
  data() {
    return {
      requestUrl: 'api-m/inputServerDetail/base/v1/page', //表格请求路径
      loading: false,
      isShow: false,
      tableData: [], //表格数据
      filterField: {
        cnName: '',
        serverId: '',
        version: '',
      },
      pageSize: 20,
      pageNo: 1,
      dialogVisible: false,
      dialogTitle: '',
      isSaveLoading: false,
      edit: '',
      dialogFormData: {
        id: '',
        cnName: '',
        methodName: '',
        code: '',
      },
      dialogFormRules: {
        cnName: [
          { required: true, message: '请选择接口名称', trigger: 'blur' },
        ],
        methodName: [
          { required: true, message: '请输入接口方法名', trigger: 'blur' },
        ],
        code: [{ required: true, message: '请输入接口编码', trigger: 'blur' }],
      },
    }
  },
  created() {
    this.filterField.serverId = this.$route.query.id
    this.filterField.version = this.$route.query.version
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    //列表查询
    searchTable() {
      this.$refs.pagination.getTableListData()
    },
    toAdd() {
      this.dialogVisible = true
      this.dialogTitle = '添加接口'
      this.dialogFormData.id = ''
      this.dialogFormData.cnName = ''
      this.dialogFormData.methodName = ''
      this.dialogFormData.code = ''
      this.edit = 'Add'
    },
    toUpdate(row) {
      this.dialogVisible = true
      this.dialogTitle = '修改接口信息'
      this.dialogFormData.id = row.id
      this.dialogFormData.cnName = row.cnName
      this.dialogFormData.methodName = row.methodName
      this.dialogFormData.code = row.code
      this.edit = 'Update'
    },
    toLog(row) {
      this.$router.push({
        path: '/home/interfacePlatform/dockingLog',
        name: 'dockingLog',
        query: {
          type: 'interfaceList',
          methodName: row.cnName,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/interfacePlatform/interfaceManageList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    cancel() {
      this.dialogVisible = false
    },
    saveForm() {
      this.$refs.dialogFormData.validate((valid) => {
        if (valid) {
          this.isSaveLoading = true
          this.saveFormInfo()
        } else {
          return false
        }
      })
    },
    saveFormInfo() {
      let url = 'api-m/inputServerDetail/base/v1/add'
      if (this.edit === 'Update') {
        url = 'api-m/inputServerDetail/base/v1/update'
      }
      this.axios({
        method: 'post',
        url: url,
        data: this.dialogFormData,
      })
        .then((response) => {
          this.isSaveLoading = false
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '保存成功',
            })
            this.dialogVisible = false
            this.$refs.pagination.getTableListData()
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {
          this.isSaveLoading = false
        })
    },
    changStatus(event, row) {
      const vm = this
      if (event == 'DISABLE') {
        const h = this.$createElement
        this.$msgbox({
          title: '提示',
          message: h('p', null, [
            h('span', null, '设置为停用状态后，'),
            h(
              'span',
              { style: 'color: #FF4949' },
              '所有用户将无法使用该接口对接数据'
            ),
            h('span', '，是否确定?'),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              row.enabled = 'DISABLE'
              this.enable(row.id, event, done)
            } else {
              row.enabled = 'ENABLED'
              done()
            }
          },
        }).then((action) => {})
      } else {
        const h = this.$createElement
        this.$msgbox({
          title: '提示',
          message: h('p', null, [
            h('span', null, '是否确定'),
            h('span', { style: 'color: #98F203' }, '启用'),
            h('span', '该接口?'),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              row.enabled = 'ENABLED'
              this.enable(row.id, event, done)
            } else {
              row.enabled = 'DISABLE'
              done()
            }
          },
        }).then((action) => {})
      }
    },
    enable(id, enable, done) {
      this.axios({
        method: 'post',
        url: 'api-m/inputServerDetail/base/v1/enable',
        data: {
          id: id,
          enable: enable,
        },
      })
        .then((response) => {
          done()
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '保存成功',
            })
            this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {})
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .selectWidth {
    width: 100%;
  }

  .titleBox {
    border: none;
    background: #e4ebf1;
    padding: 14px 24px;
    margin-bottom: 0px;

    .listAddBtn {
      width: 136px;
      background: #009588;
      border: none;
    }

    .listAddBtn:hover {
      background: #009588;
      border-color: #009588;
      opacity: 0.8;
    }

    .blockTitle {
      font-weight: bold;
      font-size: 18px;
      color: #333;
      line-height: 40px;
    }
  }
}
/deep/ .el-tag {
  line-height: 23px;
  height: 23px;
}
/* switch按钮样式 */
/deep/.switch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff !important;
}
/*打开时文字位置设置*/
/deep/.switch .el-switch__label--right {
  z-index: 1;
}
/* 调整打开时文字的显示位子 */
/deep/.switch .el-switch__label--right span {
  margin-right: 9px;
}
/*关闭时文字位置设置*/
/deep/.switch .el-switch__label--left {
  z-index: 1;
}
/* 调整关闭时文字的显示位子 */
/deep/.switch .el-switch__label--left span {
  margin-left: 9px;
}
/*显示文字*/
/deep/.switch .el-switch__label.is-active {
  display: block;
}
/* 调整按钮的宽度 */
/deep/.switch.el-switch .el-switch__core,
/deep/.el-switch .el-switch__label {
  width: 70px !important;
  margin: 0;
}
@import '../../../static/css/filterArea.less';
</style>
